<!DOCTYPE html>

<?php
    require_once 'classes/google.php';
    $person = $_GET['person'];
    $google = new Google();

?>


<html>
	<head>
		<title>Giftful</title>
		<link rel="stylesheet" href="css/styles.css" type="text/css">
		<!--JS Link-->
		<!-- include the Tools -->
		<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
	</head>
	<body>
		<!--Striped Pattern-->
		<div id="stripesLine"></div>
		<!--Orange Stripe-->
		<div id="orangeStripe"></div>
		<!-- content -->
		<div id="content">
			<a href="pickFriend.php"><div id="labelSmall"></div></a>
			<div id="upperText">
				Your gift recommendations!
			</div>
			<div id="left">
				<div id="titleGiftList">
					<a href="#">My Gift List</a>
				</div>
				<div class="separator"></div>
				<div id="giftList">
                    something



				</div>
			</div>
			<div id="right">
	
<?php
   $array = $google->search_item('boots', 'christmas');
    foreach($array as $n=>$v){
        echo '<div class="giftItem">
					<img class="giftImage" src="#" rel="#photo1"/>
					<a class="addGift" href="#"><img src="$v["url"]" title="Add gift to my list."/></a>
                    </div>';

            echo $n;
    }

?>
			<div class="giftItem">
					<img class="giftImage" src="#" rel="#photo1"/>
					<a class="addGift" href="#"><img src="images/plus.png" title="Add gift to my list."/></a>
				</div>
				<div class="giftItem">
					<img class="giftImage" src="#" rel="#photo2"/>
					<a class="addGift" href="#"><img src="images/plus.png" title="Add gift to my list."/></a>
				</div>
				<div class="giftItem">
					<img class="giftImage" src="#" rel="#photo3"/>
					<a class="addGift" href="#"><img src="images/plus.png" title="Add gift to my list."/></a>
				</div>
				<div class="giftItem">
					<img class="giftImage" src="#" rel="#photo4"/>
					<a class="addGift" href="#"><img src="images/plus.png" title="Add gift to my list."/></a>
				</div>
				<div class="giftItem">
					<img class="giftImage" src="#" rel="#photo5"/>
					<a class="addGift" href="#"><img src="images/plus.png" title="Add gift to my list."/></a>
				</div>
			</div>
			<div class="apple_overlay" id="photo1">
				<img src="images/questionmark.png" />
				<div class="details">
					<h3>Name of Product</h3>
					<p>
						The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
						1998 by the Spanish artist Gustavo.
					</p>
					<input type="range" name="test" min="1" max="5" value="3" />
				</div>
			</div>
			<div class="apple_overlay" id="photo2">
				<img src="images/questionmark.png" />
				<div class="details">
					<h3>Name of Product</h3>
					<p>
						The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
						1998 by the Spanish artist Gustavo.
					</p>
					<input type="range" name="test" min="1" max="5" value="3" />
				</div>
			</div>
			<div class="apple_overlay" id="photo3">
				<img src="images/questionmark.png" />
				<div class="details">
					<h3>Name of Product</h3>
					<p>
						The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
						1998 by the Spanish artist Gustavo.
					</p>
					<input type="range" name="test" min="1" max="5" value="3" />
				</div>
			</div>
			<div class="apple_overlay" id="photo4">
				<img src="images/questionmark.png" />
				<div class="details">
					<h3>Name of Product</h3>
					<p>
						The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
						1998 by the Spanish artist Gustavo.
					</p>
					<input type="range" name="test" min="1" max="5" value="3" />
				</div>
			</div>
			<div class="apple_overlay" id="photo5">
				<img src="images/questionmark.png" />
				<div class="details">
					<h3>Name of Product</h3>
					<p>
						The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
						1998 by the Spanish artist Gustavo.
					</p>
					<input type="range" name="test" min="1" max="5" value="3" />
				</div>
			</div>
		</div>
		<!-- make all links with the 'rel' attribute open overlays -->
		<script>
			$(function() {
				$("#right img[rel]").overlay({
					effect : 'apple'
				});
			});
			
			$(":range").rangeinput();

		</script>
	</body>
</html>
